<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Tree.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Tree.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author zjh
 */
+function ($) {

    &quot;use strict&quot;;

    // TREE CONSTRUCTOR AND PROTOTYPE

    /**
     * 树组件
     * @class Tree
     * @constructor
     * @example
     * 	js代码
     * 	$(function(){
			$(&#x27;#ex-tree-basic&#x27;).tree({
				data: treeData,
				loadingHTML: &#x27;&lt;div class=&quot;static-loader&quot;&gt;Loading...&lt;/div&gt;&#x27;,
				multiSelect: true,
				cacheItems: true,
				useChkBox:true
			});
		})
		
		html代码
		&lt;div class=&quot;tree&quot; id=&quot;ex-tree-basic&quot;&gt;&lt;/div&gt;
     */
    var Tree = function (element, options) {
        this.$element = $(element);
        this.options = $.extend({}, $.fn.tree.defaults, options);
        //渲染，改成build建造方法
        this.build(options);
        //叶子节点点击的时候
        this.$element.on(&#x27;click&#x27;, &#x27;.tree-item&#x27;, $.proxy( function(ev) { this.selectChildren(ev.currentTarget); } ,this));
        //父节点点击的时候
        this.$element.on(&#x27;click&#x27;, &#x27;.tree-folder-header&#x27;, $.proxy( function(ev) { this.selectParent(ev.currentTarget); }, this));
        //复选框点击的时候
        this.$element.on(&#x27;click&#x27;,&#x27;:checkbox&#x27;,$.proxy(function(ev){this.checkParent(ev.currentTarget);},this));
        //右键点击树节点的时候，目前先暂定任意节点
        this.$element.on(&#x27;mousedown&#x27;,&#x27;.tree-folder-name,.tree-item-name&#x27;,$.proxy(function(ev){this.popMenu(ev.currentTarget,ev);},this));
        //添加鼠标右键事件监听
        this.$element.on(&#x27;contextmenu&#x27;,&#x27;.tree-folder-header,.tree-item-name&#x27;,$.proxy(function(ev){this.initContextmenu(ev);},this));

    };

    Tree.prototype = {
    	
        constructor: Tree,

        //建造方法，包括对参数ajaxUrl的判断，如果包含有该参数，则ajax方式获取，而不是data属性
        build: function(options){
            var self = this;
            if(options.ajaxUrl==&quot;&quot;||options.ajaxUrl==null){
                self.render();
            }else{
                $.ajax({
                    type:&quot;POST&quot;,
                    url:options.ajaxUrl,
                    dataType:&quot;text&quot;,
                    data:options.reqParam,
                    success:function(data){
                        options.data = eval(data);
                        self.render();
                    },error:function(){

                    }
                });
            }
        },

        //渲染方法
        render: function () {
            this.populate(this.options.data, this.$element);
            this.$element.find(&#x27;.tree-folder&#x27;).show();
            this.$element.find(&#x27;.tree-item&#x27;).show();
        },
        populate: function (data, $el) {
            var self = this;
            $.each(data, function(index, value) {
                var $entity ;
                //如果还有子节点
                if(!self.isEmpty(value.children) || value.type == &#x27;parent&#x27;){
                    $entity = self.createParent();
                    $entity.find(&#x27;.tree-folder-name&#x27;).html(value.title);
                    $entity.find(&#x27;.tree-folder-header&#x27;).data(value.id);
                    $entity.attr(&quot;id&quot;,value.id);
                    self.populate(value.children, $entity.find(&quot;.tree-folder-content:eq(0)&quot;));
                    $entity.find(&quot;.tree-folder-content:eq(0)&quot;).hide();
                    //这里加上检测是否有自定义图标
                    if(value.icon){
                        $entity.children(&#x27;.tree-folder-header&#x27;).children(&quot;i&quot;).addClass(value.icon)
                            .prop(&quot;icon&quot;,value.icon);
                    }
                }else{
                    $entity = self.createChildren();
                    $entity.find(&#x27;.tree-item-name&#x27;).html(value.title);
                    $entity.attr(&quot;href&quot;,value.href);
                    $entity.attr(&quot;id&quot;,value.id);
                    $entity.data(value.id);
                    //这里加上检测是否有自定义图标，对于子节点，还有个bug
                    if(value.icon){
                        $entity.children(&quot;i&quot;).addClass(value.icon).prop(&quot;icon&quot;,value.icon);
                    }
                }
                $el.append($entity);
            });
        },
        isEmpty: function(obj){
            if(!obj){
                return true;
            }
            for (var i in obj ) {
                if(obj.hasOwnProperty(i)){
                    return false;
                }
            }
            return true;
        },
        createParent: function(){
            var $node;
            //如果采用复选框
            if(this.options.useChkBox){
                $node = $(&#x27;&lt;div class=&quot;tree-folder checkbox&quot; style=&quot;display:none;&quot;&gt;&#x27; +
                    &#x27;&lt;input type=&quot;checkbox&quot;&gt;&#x27;+
                    &#x27;&lt;div class=&quot;tree-folder-header&quot;&gt;&#x27; +
                    &#x27;&lt;i class=&quot;glyphicon glyphicon-folder-close&quot;&gt;&lt;/i&gt;&#x27;+
                    &#x27;&lt;div class=&quot;tree-folder-name&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;tree-folder-content&quot;&gt;&lt;/div&gt;&#x27;+
                    &#x27;&lt;div class=&quot;tree-loader&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;);
            }else{
                $node = $(&#x27;&lt;div class=&quot;tree-folder&quot; style=&quot;display:none;&quot;&gt;&#x27;+
                    &#x27;&lt;div class=&quot;tree-folder-header&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-folder-close&quot;&gt;&lt;/i&gt;&#x27;+
                    &#x27;&lt;div class=&quot;tree-folder-name&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;tree-folder-content&quot;&gt;&lt;/div&gt;&#x27;+
                    &#x27;&lt;div class=&quot;tree-loader&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;);
            }

            return $node;
        },
        createChildren:function(){
            var $node;
            //如果采用复选框
            if(this.options.useChkBox){
                $node = $(&#x27;&lt;div class=&quot;tree-item checkbox&quot; style=&quot;display:none;&quot;&gt;&#x27;+
                    &#x27;&lt;input type=&quot;checkbox&quot;&gt;&#x27; +
                    &#x27;&lt;div class=&quot;tree-item-name&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;);
            }else{
                $node = $(&#x27;&lt;div class=&quot;tree-item&quot; style=&quot;display:none;&quot;&gt;&#x27;+
                    &#x27;&lt;i class=&quot;glyphicon glyphicon-list-alt&quot;&gt;&lt;/i&gt;&lt;div class=&quot;tree-item-name&quot;&gt;&lt;/div&gt;&lt;/div&gt;&#x27;);
            }

            return $node;
        },
        selectChildren: function (el) {
        	
            var $el = $(el);
            var $all = this.$element.find(&#x27;.tree-selected&#x27;);
            var data = [];
            
            //检测是否有外部函数
            var eventOnSelect = this.options.onSelect;
        	if(eventOnSelect){
        		eventOnSelect($el);
        		return;
        	}
        	//***************************
        	
            if (this.options.multiSelect) {
                $.each($all, function(index, value) {
                    var $val = $(value);
                    if($val[0] !== $el[0]) {
                        data.push( $(value).data() );
                    }
                });
            } else if ($all[0] !== $el[0]) {
                $all.removeClass(&#x27;tree-selected&#x27;)
                    .find(&#x27;i&#x27;).removeClass(&#x27;glyphicon-ok&#x27;).addClass(&#x27;glyphicon-list-alt&#x27;);
                data.push($el.data());
            }

            if($el.hasClass(&#x27;tree-selected&#x27;)) {
                $el.removeClass(&#x27;tree-selected&#x27;);
                $el.find(&#x27;i&#x27;).removeClass(&#x27;glyphicon-ok&#x27;).addClass(&#x27;glyphicon-list-alt&#x27;);
                //这里检测是否有icon属性
                if($el.find(&quot;i&quot;).prop(&quot;icon&quot;)){
                    $el.find(&quot;i&quot;).addClass($el.find(&quot;i&quot;).prop(&quot;icon&quot;));
                }
            } else {
                $el.addClass (&#x27;tree-selected&#x27;);
                $el.find(&#x27;i&#x27;).removeClass(&#x27;glyphicon-list-alt&#x27;).addClass(&#x27;glyphicon-ok&#x27;);
                if (this.options.multiSelect) {
                    data.push( $el.data() );
                }
            }
            //console.info(&quot;icon = &quot; + $el.find(&quot;i&quot;).prop(&quot;icon&quot;));

            if(data.length) {
                this.$element.trigger(&#x27;selected&#x27;, {info: data});
            }

        },

        selectParent: function (el) {
            var $el = $(el);
            var $par = $el.parent();

            if($el.find(&#x27;.glyphicon-folder-close&#x27;).length) {
                if ($par.find(&#x27;.tree-folder-content&#x27;).children().length) {
                    $par.find(&#x27;.tree-folder-content:eq(0)&#x27;).show();
                }

                $par.find(&#x27;.glyphicon-folder-close:eq(0)&#x27;)
                    .removeClass(&#x27;glyphicon-folder-close&#x27;)
                    .addClass(&#x27;glyphicon-folder-open&#x27;);

                this.$element.trigger(&#x27;opened&#x27;, {element:$el, data: $el.data()});
            } else {
                if(this.options.cacheItems) {
                    $par.find(&#x27;.tree-folder-content:eq(0)&#x27;).hide();
                } else {
                    $par.find(&#x27;.tree-folder-content:eq(0)&#x27;).empty();
                }

                $par.find(&#x27;.glyphicon-folder-open:eq(0)&#x27;)
                    .removeClass(&#x27;glyphicon-folder-open&#x27;)
                    .addClass(&#x27;glyphicon-folder-close&#x27;);
                this.$element.trigger(&#x27;closed&#x27;, {element:$el, data: $el.data()});
            }
        },

        selectedItems: function () {
            var $sel = this.$element.find(&#x27;.tree-selected&#x27;);
            var data = [];

            $.each($sel, function (index, value) {
                data.push($(value).data());
            });
            return data;
        }

        //新加函数，勾选父节点的复选框时，下面所有的子节点的复选框都要同样的勾选状态
        ,checkParent:function(el,ev){
            var $el = $(el);
            var isChecked = $el.prop(&quot;checked&quot;);
            $el.parent().find(&quot;:checkbox&quot;).prop(&quot;checked&quot;,isChecked);
        }

        //新加函数，弹出菜单
        ,popMenu:function(el,ev){
            var mouseMenu = this.options.mouseMenu;
            var $el = $(el);
            if(mouseMenu==null){
                return false;
            }
            if(ev.which==3){
                mouseMenu.hide();
                mouseMenu.css({
                    &quot;position&quot;:&quot;absolute&quot;,
                    &quot;top&quot;:ev.clientY,			//这里需要再调试
                    &quot;left&quot;:ev.clientX
                });
                mouseMenu.show(&quot;fast&quot;);
                //加上一个标记
                var $p = null;						//临时节点，存储parent
                if($el.hasClass(&quot;tree-folder-name&quot;)){
                    $p = $el.parent().parent();
                }else if($el.hasClass(&quot;tree-item-name&quot;)){
                    $p = $el.parent();
                }
                $el.prop(&quot;node&quot;,$p.attr(&quot;id&quot;));
                console.info($el + &quot;.node = &quot; + $el.prop(&quot;node&quot;));
            }
        },

        //鼠标右键事件监听
        initContextmenu: function(ev){
            this.$element.trigger(&#x27;rightClick&#x27;, ev);
        },
        //根据节点创建右键菜单
        createRightMenu: function(data){
            var self = this;
            $(&#x27;.tree-right-menu&#x27;).remove();
            var $element = $(data.element);
            var ev = data.event;
            var menuData = data.data;
            var menuHtml = new Array();
            menuHtml.push(&#x27;&lt;ul class=&quot;dropdown-menu tree-right-menu&quot;&gt;&#x27;);
            $.each(menuData, function(){
                menuHtml.push(&#x27;&lt;li action=&quot;&#x27;+this.action+&#x27;&quot;&gt;&lt;a&gt;&#x27;+this.title+&#x27;&lt;/a&gt;&lt;/li&gt;&#x27;);
            });
            menuHtml.push(&#x27;&lt;/ul&gt;&#x27;);
            $(menuHtml.join(&#x27;&#x27;)).appendTo($(&#x27;body&#x27;)).show()
                .css({position:&#x27;fixed&#x27;, left: ev.pageX, top: ev.pageY})
                .on(&#x27;mouseleave&#x27;, function(){
                    $(this).remove();
                }).find(&#x27;li&#x27;).on(&#x27;click&#x27;, function(){
                    var $this = $(this);
                    if($element.hasClass(&#x27;tree-item-name&#x27;)){
                        self.$element.trigger($this.attr(&#x27;action&#x27;), $element.parent());
                    }else{
                        self.$element.trigger($this.attr(&#x27;action&#x27;), $element);
                    }
                    $this.parent().remove();
                });
        },
        //添加一个节点
        addChildren: function(data){
            var self = this;
            var node = $(data.node);
            var $entity = null;
            var menu = data.menu;
            if(data.type &amp;&amp; data.type == &#x27;parent&#x27;){
                $entity = self.createParent();
                $entity.find(&#x27;.tree-folder-name&#x27;).html(menu.title);
                $entity.find(&#x27;.tree-folder-header&#x27;).data(menu);
                $entity.on(&#x27;click&#x27;, {element: $(this)}, function(e){
                    self.selectParent(e.data.element);
                });
            }else{
                $entity = self.createChildren();
                $entity.find(&#x27;.tree-item-name&#x27;).html(menu.title);
                $entity.data(menu);
                $entity.on(&#x27;click&#x27;,{element: $(this)}, function(e){
                    self.selectChildren(e.data.element);
                });
            }
            $entity.show().on(&#x27;contextmenu&#x27;, function(ev){
                self.initContextmenu(ev);
            });
            node.parent().find(&#x27;&gt;.tree-folder-content&#x27;).append($entity).show();
            if(node.find(&#x27;.glyphicon-folder-close&#x27;).length &gt; 0){
                node.trigger(&#x27;click&#x27;);
            }
        },
        //删除一个节点
        removeChildren: function(data){
            $(data).remove();
        }
        //提供一个显示文本框用于重新设置标题的接口

    };


    // TREE PLUGIN DEFINITION

    $.fn.tree = function (option, value) {
        var methodReturn;

        var $set = this.each(function () {
            var $this = $(this);
            var data = $this.data(&#x27;koala.tree&#x27;);
            var options = typeof option === &#x27;object&#x27; &amp;&amp; option;

            if (!data) $this.data(&#x27;koala.tree&#x27;, (data = new Tree(this, options)));
            if (typeof option === &#x27;string&#x27;) methodReturn = data[option](value);
        });

        //如果有右键菜单，就把原来的右键除掉
        if(option.mouseMenu!=null){
            $(document).bind(&quot;contextmenu&quot;,function(){return false;});
        }

        //添加判断是否可拖放
        if(option.draggable){
//			var $node = $(this).find(&quot;.tree-folder,.tree-item&quot;);
            var $node = $(&quot;.tree&quot;);
            $node.sortable({
                items:&quot;.tree-folder,.tree-item&quot;
                //,axis:&quot;y&quot;
				,containment: $(this).parent()
            });
            $node.disableSelection();
        }

        return (methodReturn === undefined) ? $set : methodReturn;

    };

    //默认内置属性列表
    $.fn.tree.defaults = {
    	/**
    	 * 是否允许树节点多选
    	 * @property multiSelect
    	 * @type Boolean
    	 * @default false
    	 */
        multiSelect: false,
        /**
    	 * 载入数据时显示的html dom
    	 * @property loadingHTML
    	 * @type String
    	 * @default &#x27;&lt;div&gt;Loading...&lt;/div&gt;&#x27;
    	 */
        loadingHTML: &#x27;&lt;div&gt;Loading...&lt;/div&gt;&#x27;,
        /**
    	 * 当父节点折叠时，子节点是否保存，如果设置为true，则单纯隐藏，设置为false，则清空其子节点
    	 * @property cacheItems
    	 * @type Boolean
    	 * @default true
    	 */
        cacheItems: true,
        /**
    	 * 是否带复选框
    	 * @property useChkBox
    	 * @type Boolean
    	 * @default false
    	 */
        useChkBox:false,
        /**
    	 * 节点可否拖放
    	 * @property draggable
    	 * @type Boolean
    	 * @default false
    	 */
        draggable:false,
//        /**
//    	 * 节点可否编辑
//    	 * @property multiSelect
//    	 * @type Boolean
//    	 * @default false
//    	 */
//        editable:false,
        /**
    	 * 右键弹出菜单，为下拉框的jQuery
    	 * @property mouseMenu
    	 * @type jQuery对象
    	 * @default null
    	 */
        mouseMenu:null,
        /**
    	 * 异步加载的url，一旦设置这个，取代原生的json data
    	 * @property ajaxUrl
    	 * @type String
    	 * @default &quot;&quot;
    	 */
        ajaxUrl:&quot;&quot;,
        /**
    	 * 与ajaxUrl对应的请求参数，为一个{}对象
    	 * @property reqParam
    	 * @type js对象{}
    	 * @default null
    	 */
        reqParam:null,
        /**
    	 * 静态数据源，格式：
    	 * @property data
    	 * @type js对象{}
    	 * @default null
    	 */
        data:null
    };

    $.fn.tree.Constructor = Tree;

}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
